<template>
  <div id="container" style="height: 800px;margin: 2vw">
    <!-- 用户数,笔记数,评论数 -->

    <div class="data-1">
      <p>用户数</p>
      <span>{{ userNum }}</span>
    </div>
    <div class="data-2">
      <p>笔记数</p>
      <span>{{ noteNum }}</span>
    </div>
    <div class="data-3">
      <p>评论数</p>
      <span>{{ remarkNum }}</span>
    </div>

    <!-- 笔记分布图 -->
    <div id="note">
      <p>笔记分布</p>
      <div id="noteChart" :style="{ width: '367px', height: '386px' }"></div>
    </div>
    <!-- 评论分布图 -->
    <div id="discuss">
      <p>评论分布</p>
      <div id="dcsChart" :style="{ width: '367px', height: '386px' }"></div>
    </div>
    <!-- 排行榜 -->
    <div id="table">
      <div style="display: flex;justify-content: space-between;height: 50px">
        <p>热门笔记排行榜</p>
        <el-select v-model="value" clearable placeholder="全部频道" style="width: 150px" @change="changeSelect()">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="num" label="排名" width="50vw" align="center"></el-table-column>
        <el-table-column prop="title" label="标题" width="200vw" align="center"></el-table-column>
        <el-table-column prop="hot" label="热度" align="center"></el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [],
      value: '',
      noteNum: 0,
      remarkNum: 0,
      userNum: 0,
      tableData: [],
    };
  },
  methods: {
    //下拉选择框变化
    changeSelect() {
      let url = `/api/lzs/note/heat?channelId=${this.value}`;
      this.http.get(url).then((res) => {
        this.tableData = []
        for (let i in res.data.data) {
          this.tableData.push({
            num: Number(i) + 1,
            title: res.data.data[i].title,
            hot: res.data.data[i].heat,
          })
        }
      });
    },
    //下拉选择框初始化
    select() {
      let url = "/api/lzs/channel/list"
      this.http.get(url).then((res) => {
        for (let i in res.data.data) {
          let temp = {
            value: res.data.data[i].id,
            label: res.data.data[i].name
          }
          this.options.push(temp)
        }
      })
    },
    //获取统计数据
    getData() {
      let url = "/api/lzs/count/base";
      this.http.post(url).then((res) => {
        this.noteNum = res.data.data.noteNum;
        this.remarkNum = res.data.data.remarkNum;
        this.userNum = res.data.data.userNum;
      });
    },
    //笔记统计图
    noteChart() {
      let url = "/api/lzs/note/channel";
      this.http.get(url).then((res) => {
        let myChart = this.$echarts.init(document.getElementById("noteChart"));
        let option = {
          legend: {
            top: "bottom",
          },
          toolbox: {
            show: true,
            feature: {
              mark: {show: true},
            },
          },
          series: [
            {
              name: "Nightingale Chart",
              type: "pie",
              radius: [10, 100],
              center: ["50%", "50%"],
              roseType: "area",
              itemStyle: {
                borderRadius: 8,
              },
              data: [],
            },
          ],
        };
        for (let i in res.data.data) {
          let temp = {
            name: res.data.data[i].name,
            value: res.data.data[i].value
          }
          option.series[0].data.push(temp);
        }
        myChart.setOption(option);
      });
    },
    //评论分布图
    dcsChart() {
      let url = "/api/lzs/remark/channel"
      this.http.get(url).then((res) => {
        let myChart = this.$echarts.init(document.getElementById("dcsChart"));
        let option = {
          legend: {
            top: "bottom",
          },
          toolbox: {
            show: true,
            feature: {
              mark: {show: true},
            },
          },
          series: [
            {
              name: "Nightingale Chart",
              type: "pie",
              radius: [10, 100],
              center: ["50%", "50%"],
              roseType: "area",
              itemStyle: {
                borderRadius: 8,
              },
              data: [],
            },
          ],
        };
        for (let i in res.data.data) {
          let temp = {
            name: res.data.data[i].name,
            value: res.data.data[i].value
          }
          option.series[0].data.push(temp);
        }
        myChart.setOption(option);
      })
    }
  },
  mounted() {
    this.noteChart();
    this.dcsChart();
    this.getData();
    this.select();
    this.changeSelect();
  },
};
</script>

<style lang="scss" scoped>
#container {
  height: 800px;
  padding: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .data-1 {
    background-image: url("../assets/images/pic/background1.png");
  }

  .data-2 {
    background-image: url("../assets/images/pic/background2.png");
  }

  .data-3 {
    background-image: url("../assets/images/pic/background3.png");
  }

  .data-1, .data-2, .data-3 {
    background-repeat: no-repeat;
    width: 400px;
    height: 208px;
    margin-bottom: 30px;

    p {
      margin: 36px 0 0 35px;
      color: rgba(34,34,34,0.75);
      font-size: 16px;
      font-family: PingFang SC-R;
    }

    span {
      margin: 0 0 0 35px;
      font-size: 40px;
      color: #222222;
      font-family: DINPro-Medium;
      text-align: left;
    }
  }


  #note,#discuss {
    margin-right: 30px;
    p {
      margin: 30px 0 0 30px;
      font-size: 18px;
      font-family: PingFang SC-M;
    }
  }

  #table {
    margin-right: 3vw;
    p {
      font-size: 24px;
      margin-bottom: 10px;
      color: #222222;
      font-family: PingFang SC-M;
      text-align: left;
    }
  }

}

</style>
